<template>
  <div>
    <!-- 步骤组件 -->
    <el-steps :active="active" align-center >
      <el-step title="编辑商品信息" description=""></el-step>
      <el-step title="编辑规格" description=""></el-step>
      <el-step title="编写商品详情" description=""></el-step>
    </el-steps>
    <!-- 添加商品表单 -->
    <el-row :gutter="15" v-show="formStatus" style="margin-top: 50px;margin-left: 200px">
      <el-form ref="spuForm" :model="formData" :rules="rules" size="medium" label-width="100px"
               label-position="left">
        <el-col :span="14">
          <el-form-item label="商品名称" prop="spuName">
            <el-input v-model="formData.spuName" placeholder="请输入商品名称" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="市场价" prop="spuMoney">
            <el-input v-model="formData.spuMoney" placeholder="请输入市场价" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="商品重量" prop="spuWeight">
            <el-input v-model="formData.spuWeight" placeholder="商品重量" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="计量单位" prop="spuMeterage">
            <el-input v-model="formData.spuMeterage" placeholder="请输入计量单位" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="商品类型" prop="spuTypeId">
            <el-select v-model="formData.spuTypeId" placeholder="请选择商品类型" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in this.productCateOptions" :key="index" :label="item.kindsName"
                         :value="item.kindsId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="14">
          <el-form-item label="品牌" prop="spuBrandId">
            <el-select v-model="formData.spuBrandId" placeholder="请选择品牌" clearable :style="{width: '100%'}">
              <el-option v-for="(item, index) in this.brandOptions" :key="index" :label="item.spuBrandName"
                         :value="item.spuBrandId"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="服务保障" prop="serviceValue">
            <template>
              <el-transfer v-model="formData.serviceValue" :data="serviceData" :titles="['服务列表','已选服务']"></el-transfer>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="搜索关键字" prop="spuKeyword">
            <el-input v-model="formData.spuKeyword" placeholder="请输入搜索关键字" clearable :style="{width: '100%'}">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
        </el-col>
      </el-form>
    </el-row>
    <!-- 第二步表格 -->
    <el-card v-show="tableStatus" style="width: 1300px;margin-top: 50px;margin-left: 200px">
      <el-button
        class="btn-add"
        @click="addSku"
        size="mini">
        添加规格
      </el-button>
      <el-table
        :data="skuList"
        style="width: 100%">
        <el-table-column
          prop="skuId"
          label="规格编号"
          width="180">
        </el-table-column>
        <el-table-column
          prop="skuName"
          label="商品规格"
          width="180">
        </el-table-column>
        <el-table-column
          prop="price"
          label="价格"
          width="180">
        </el-table-column>
        <el-table-column
          prop="sum"
          label="库存">
        </el-table-column>
        <el-table-column
          prop="skuImg"
          label="规格图片">
          <template slot-scope="scope">
            <img style="height: 80px;width: 80px" :src="scope.row.skuImg">
          </template>
        </el-table-column>
        <el-table-column label="操作" width="160" align="center">
          <template slot-scope="scope">
            <p>
              <el-button
                size="mini"
                @click="updateSku(scope.row)">编辑
              </el-button>
            </p>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!--第三步：添加商品图片-->
    <el-row :gutter="15" v-show="imgStatus" style="margin-top: 50px;margin-left: 200px">
      <el-form ref="spuForm" :model="imgForm" :rules="rules" size="medium" label-width="100px"
               label-position="left">

          <el-form-item label="商品主图：" prop="img1">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8101/skuUpload/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess2"
              :before-upload="beforeAvatarUpload2">
              <img v-if="imgForm.img1" :src="imgForm.img1" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品次图1：" prop="img2">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8101/skuUpload/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess3"
              :before-upload="beforeAvatarUpload3">
              <img v-if="imgForm.img2" :src="imgForm.img2" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品次图2：" prop="img3">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8101/skuUpload/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess4"
              :before-upload="beforeAvatarUpload4">
              <img v-if="imgForm.img3" :src="imgForm.img3" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品次图4：" prop="img4">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8101/skuUpload/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess5"
              :before-upload="beforeAvatarUpload5">
              <img v-if="imgForm.img4" :src="imgForm.img4" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="商品次图5：" prop="img5">
            <el-upload
              class="avatar-uploader"
              action="http://localhost:8101/skuUpload/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess6"
              :before-upload="beforeAvatarUpload6">
              <img v-if="imgForm.img5" :src="imgForm.img5" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
        <div class="edit_container">
          <span>
            商品详细：
          </span>
          <!-- 通过el-upload的uploadSuccess函数获取上传图片的地址替换富文本框bs64码图片 -->
          <!-- :data的作用是可以向后端传对象数据 -->
          <el-upload
            class="avatar-uploader2"
            action="http://localhost:8101/skuUpload/upload"
            :data="date"
            :show-file-list="true"
            :on-success="uploadSuccess">
          </el-upload>
          <!-- class="quill-editor"富文本宽度样式， ql-editor显示内容的空格换行。 -->
          <!-- :options="editorOption"自定义配置富文本需要的功能 -->
          <!-- @blur 失去焦点触发事件 -->
          <!-- @focus 获得焦点触发事件 -->
          <!-- @change 内容改变触发事件 -->
          <quill-editor
            class="quill-editor ql-editor"
            v-model="content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          >
          </quill-editor>
        </div>
      </el-form>
    </el-row>




    <!-- 弹窗组件 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form label-width="120px" v-model="skuListForm">
        <el-form-item v-for="(leftTitle, index) in attrObject" :key="leftTitle.attrId" :label="leftTitle.attrName"
                      prop="attrValue">
          <template slot-scope="scope">
            <el-card shadow="never">
              <el-radio-group v-model="formData.spuAttrValueList[index]" @change="process">
                <el-radio v-for="item in leftTitle.spuAttrValueList" :label="item" :key="item.attrValueId"
                             class="littleMarginLeft">{{item.attrValue}}
                </el-radio>
              </el-radio-group>
            </el-card>
          </template>
        </el-form-item>
        <el-form-item label="规格库存：" prop="sum">
          <el-input v-model="skuListForm.sum"></el-input>
        </el-form-item>
        <el-form-item label="单价：" prop="price">
          <el-input v-model="skuListForm.price"></el-input>
        </el-form-item>
        <el-form-item label="规格图片" prop="skuImg">
          <el-upload
            class="avatar-uploader"
            action="http://localhost:8101/skuUpload/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="skuListForm.skuImg" :src="skuListForm.skuImg" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="dialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="attrValueConfirm">确 定</el-button>
      </span>
    </el-dialog>

    <el-card class="box-card" v-show="tableStatus" style="width: 1300px;margin-top: 50px;margin-left: 200px">
      <h3>商品参数</h3>
      <el-button :plain="true" type="primary" @click="handleAttributeShow">添加</el-button>
      <el-table :data="attributes">
        <el-table-column property="attribute" label="商品参数名称"/>
        <el-table-column property="value" label="商品参数值"/>
        <el-table-column align="center" label="操作" width="100" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="danger" size="mini" @click="handleAttributeDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-dialog :visible.sync="attributeVisiable" title="设置商品参数">
        <el-form
          ref="attributeForm"
          :model="attributeForm"
          status-icon
          label-position="left"
          label-width="100px"
          style="width: 400px; margin-left:50px;">
          <el-form-item label="商品参数名称" prop="attribute">
            <el-input v-model="attributeForm.attribute"/>
          </el-form-item>
          <el-form-item label="商品参数值" prop="value">
            <el-input v-model="attributeForm.value"/>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="attributeVisiable = false">取消</el-button>
          <el-button type="primary" @click="handleAttributeAdd">确定</el-button>
        </div>
      </el-dialog>
    </el-card>
    <!-- 底部按钮 -->
    <el-button v-if="this.active != 1 && this.active < 4" type="primary" @click="previous" style="margin-top: 50px;margin-left: 200px">上一步</el-button>
    <el-button v-if="this.active == 3" type="primary" @click="finish" style="margin-top: 50px;margin-left: 200px">完成</el-button>
    <el-button v-if="this.active < 3" type="primary" @click="next" style="margin-top: 50px;margin-left: 200px">下一步</el-button>
  </div>
</template>
<script>
  export default {
    components: {},
    props: [],
    data () {

      return {
        date:{ //传给后端的对象
          token:'', //后端需要上传图片时绑定的token。
          videoCode:null
        },
        content: `<p>hello world</p>`,
        editorOption: {
            //theme: "snow",//默认是这个，这个代码不注释会显示富文本所有的功能
            placeholder: '最多输入10000字。',
            modules: {
              toolbar: {
                container: [
                  ['italic','bold','underline'],
                  [{ 'align': [] }],
                  ['image']
                ],  // 工具栏
                handlers: { //这里把点击upload的焦点绑定到富文本框图片上
                  'image': function (value) {
                    console.log("value::::"+value)
                    if (value) {
                      document.querySelector('.avatar-uploader2 input').click()
                    } else {
                      this.quill.format('image', false);
                    }
                  }
                }
              }
          }
        },
        imgForm:{
          img1:'',
          img2:'',
          img3:'',
          img4:'',
          img5:'',
          img6:'',
        },
        dialogTitle:'',
        dialogTitle2:'',
        spu:undefined,
        attributes:[],
        skuListForm: {
          skuId:'',
          sum: "",
          price: "",
          skuImg: "",
          attr: [],
          skuName: "",
        },
        indexSetUp:'',
        attrObject: [],
        formData: {
          spuName: "",
          spuDesc: undefined,
          spuMoney: "",
          spuWeight: "",
          spuMeterage: undefined,
          spuTypeId: undefined,
          spuBrandId: undefined,
          field120: [],
          spuKeyword: undefined,
          spuAttrValueList: [],
          serviceValue:[],
          detailHtml:'',
        },

        rules: {
          spuName: [{
            required: true,
            message: "请输入商品名称",
            trigger: "blur"
          }],
          spuDesc: [{
            required: true,
            message: "请输入商品描述",
            trigger: "blur"
          }],
          spuMoney: [{
            required: true,
            message: "请输入市场价",
            trigger: "blur"
          }],
          spuWeight: [{
            required: true,
            message: "商品重量",
            trigger: "blur"
          }],
          spuMeterage: [{
            required: true,
            message: "请输入计量单位",
            trigger: "blur"
          }],
          field119: [{
            required: true,
            message: "请选择商品类型",
            trigger: "change"
          }],
          spuBrandId: [{
            required: true,
            message: "请选择品牌",
            trigger: "change"
          }],
          field120: [{
            required: true,
            type: "array",
            message: "请至少选择一个服务保障",
            trigger: "change"
          }],
          spuKeyword: [{
            required: true,
            message: "请输入搜索关键字",
            trigger: "blur"
          }],
        },
        field119Options: [{
          "label": "选项一",
          "value": 1
        }, {
          "label": "选项二",
          "value": 2
        }],
        spuBrandIdOptions: [{
          "label": "选项一",
          "value": 1
        }, {
          "label": "选项二",
          "value": 2
        }],
        field120Options: [{
          "label": "选项一",
          "value": 1
        }, {
          "label": "选项二",
          "value": 2
        }, {
          "label": "xxxxx",
          "value": 3
        }, {
          "label": "yyyyy",
          "value": 4
        }],
        attributeVisiable:false,
        attributeForm: { attribute: '', value: '' },
        attributeForm:{},
        serviceData: [],
        serviceValue: [],
        tableData: [],
        tableStatus: false,
        dialogVisible: false,
        dialogVisible2: false,
        imgStatus:false,
        active: 1,
        formStatus: true,
        productCateOptions: [],
        brandOptions: [],
        skuList: [],
        skuName:'',
        sku:'',
        paramIndex:'',
      }
    },
    /*created () {
      // 获取后端需要的token, 上传图片的时候用。
      this.getToken();
    },*/
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      }
    },
    watch: {},
    created () {
      this.getServiceEnsuresList()
      this.getBrandList()
      this.getProductCateList()
    },
    mounted () {
    },
    computed: {
      editor() {
        return this.$refs.myQuillEditor.quill;
      },
    },
    methods: {

      // 上传图片
      uploadSuccess(res, file){
        console.log("res:---"+res);
        console.log(file);
        // 首先获取富文本编辑器的实例
        let quill = this.$refs.myQuillEditor.quill
        if (file.status == "success") {
          // 获取光标所在位置
          let length = quill.getSelection().index;
          console.log(length+"------------");
          // 插入图片res为服务器返回的数据
          quill.insertEmbed(length, 'image', res)
          // 光标移动至文本末端
          quill.setSelection(length + 1)
        } else {
          //loot.Messages(this,'error','图片插入失败!')
        }
      },
      // 准备编辑器
      onEditorReady(editor) {
      },
      onEditorBlur() {}, // 失去焦点事件
      onEditorFocus() {}, // 获得焦点事件
      onEditorChange(event) {
        console.log(this.content);
        event.quill.deleteText(100, 4) //限制输入字数，行数。
      }, // 内容改变事件

      finish(){
        this.$axios({
          method: "post",
          url: "http://localhost:8101/spuDetail/add",
          params:{
            img:this.imgForm.img1,
            imgTrue:1,
            spuId:this.spu.spuId
          }
        }).then(result => {
        });
        this.$axios({
          method: "post",
          url: "http://localhost:8101/spuDetail/add",
          params:{
            img:this.imgForm.img2,
            imgTrue:0,
            spuId:this.spu.spuId
          }
        }).then(result => {
        });
        this.$axios({
          method: "post",
          url: "http://localhost:8101/spuDetail/add",
          params:{
            img:this.imgForm.img3,
            imgTrue:0,
            spuId:this.spu.spuId
          }
        }).then(result => {
        });this.$axios({
          method: "post",
          url: "http://localhost:8101/spuDetail/add",
          params:{
            img:this.imgForm.img4,
            imgTrue:0,
            spuId:this.spu.spuId
          }
        }).then(result => {
        })
        this.$axios({
          method: "post",
          url: "http://localhost:8101/spuDetail/add",
          params:{
            img:this.imgForm.img5,
            imgTrue:0,
            spuId:this.spu.spuId
          }
        }).then(result => {
        });
        this.$axios({
          method: "post",
          url: "http://localhost:8101/spuDetail/add",
          params:{
            img:this.imgForm.img6,
            imgTrue:0,
            spuId:this.spu.spuId
          }
        }).then(result => {
        })
        this.$axios({
          method: "post",
          url: "http://localhost:8101/spu/addSpuDetail",
          params:{
            spuDetail:this.content,
            spuId:this.spu.spuId
          }
        }).then(result => {
          console.log(result)
        })

        /*添加基本参数*/
        let attr='';
        let attrValue='';
        let status="";
        for (let i = 0; i < this.attributes.length; i++) {
          this.$axios({
            method: "post",
            url: "http://localhost:8101/spuAttr/addBaseAttr",
            params:{
              attrName:this.attributes[i].attribute,
            }
          }).then(result => {
            attr=result.data;
            this.$axios({
              method: "post",
              url: "http://localhost:8101/spuAttrValue/addBaseAttrValue",
              params:{
                attrValue:this.attributes[i].value,
                attrId:attr.attrId
              }
            }).then(result => {
                attrValue=result.data;
                console.log(attrValue)
                this.$axios({
                  method: "post",
                  url: "http://localhost:8101/spuBaseAttr/add",
                  params:{
                    spuAttrId:attr.attrId,
                    spuAttrValueId:attrValue.attrValueId,
                    spuId:this.spu.spuId,
                    skuStatus:0
                  }
                }).then(result => {
                  status=result.status;
                  this.$message({
                    showClose: true,
                    message: '添加成功',
                    type: 'success'
                  });
                  this.$route.push({path:"./spuList"})
                })
            })
          })
        }
      },
      handleAttributeShow() {
        this.attributeForm = {}
        this.attributeVisiable = true
      },
      handleAttributeDelete(row) {
        const index = this.attributes.indexOf(row)
        this.attributes.splice(index, 1)
      },
      handleAttributeAdd() {
        this.attributes.unshift(this.attributeForm)
        this.attributeVisiable = false
      },
      /*确定*/
      attrValueConfirm(){
          this.dialogVisible=false;
          this.skuName=`{${this.skuName.substring(0,this.skuName.length-1)}}`;
          if(this.dialogTitle=="添加"){
            this.$axios({
              method: "post",
              url: "http://localhost:8101/sku/add",
              params:{
                skuName:this.skuName,
                price:this.skuListForm.price,
                sum:this.skuListForm.sum,
                skuImg:this.skuListForm.skuImg,
                //spuId:this.spu.spuId,
                spuId:this.spu.spuId
              }
            }).then(result => {
              /*得到sku*/
              this.sku= result.data
              this.skuList.push(this.sku)
            })
          }else if(this.dialogTitle=="编辑"){
            this.$axios({
              method: "post",
              url: "http://localhost:8101/sku/amend",
              params:{
                skuId:this.skuListForm.skuId,
                skuName:this.skuName,
                price:this.skuListForm.price,
                sum:this.skuListForm.sum,
                skuImg:this.skuListForm.skuImg,
              }
            }).then(result => {
              this.$axios({
                method: "get",
                url: "http://localhost:8101/sku/findBySpuId/"+this.spu.spuId,
              }).then(result => {
                  this.skuList=result.data;
              })
            })
          }

      },
      handleAvatarSuccess(res, file) {
        console.log(res)
        this.skuListForm.skuImg = res;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleAvatarSuccess2(res, file) {
        console.log(this.date)
        this.imgForm.img1 = res;
      },
      beforeAvatarUpload2(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleAvatarSuccess3(res, file) {
        console.log(res)
        this.imgForm.img2 = res;
      },
      beforeAvatarUpload3(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleAvatarSuccess4(res, file) {
        console.log(res)
        this.imgForm.img3 = res;
      },
      beforeAvatarUpload4(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleAvatarSuccess5(res, file) {
        console.log(res)
        this.imgForm.img4 = res;
      },
      beforeAvatarUpload5(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleAvatarSuccess6(res, file) {
        console.log(res)
        this.imgForm.img5 = res;
      },
      beforeAvatarUpload6(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      handleAvatarSuccess7(res, file) {
        console.log(res)
        this.imgForm.img6 = res;
      },
      beforeAvatarUpload7(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },

      handleConfirm(value){
        this.skuList[this.indexSetUp].sum=value.sum;
        this.skuList[this.indexSetUp].price=value.price;
        this.skuList[this.indexSetUp].skuImg=value.skuImg;
        this.indexSetUp='';
      },
      setUp(index,row){
        this.indexSetUp=index;
        this.dialogVisible2=true;
         // console.log(row)
      },
      previous () {
        if (this.active == 2) {
          this.formStatus = true
          this.active = 1
          this.tableStatus = false
          this.imgStatus=false
        }else if(this.active==3){
          this.formStatus = false
          this.active = 2
          this.tableStatus = true
          this.imgStatus=false
        }
      },
      next () {
        if (this.active == 1) {
           if(this.spu==undefined){
             this.$axios({
               method: "post",
               url: "http://localhost:8101/spu/add",
               params: {
                 spuName: this.formData.spuName,
                 spuMoney: this.formData.spuMoney,
                 spuWeight: this.formData.spuWeight,
                 spuMeterage: this.formData.spuMeterage,
                 spuTypeId: this.formData.spuTypeId,
                 spuBrandId: this.formData.spuBrandId,
                 spuKeyword: this.formData.spuKeyword,
                 spuStatus:0,
                 merchantId:1
               }
             }).then(result => {
               this.spu=result.data;
               console.log(this.spu)
               console.log("*****************")
               console.log(this.formData.serviceValue)
               for (let i = 0; i < this.formData.serviceValue.length; i++) {
                 this.$axios({
                   method: "post",
                   url: "http://localhost:8101/serviceEnsure/addServiceCenter",
                   params: {
                     spuId:this.spu.spuId,
                     serviceEnsureId:this.formData.serviceValue[i]
                   }
                 }).then(result => {

                 })
               }
             })

           }
          this.formStatus = false
          this.active = 2
          this.tableStatus = true
          this.imgStatus=false
          this.selectKindsChange()
        } else if (this.active == 2) {

          this.formStatus = false
          this.active = 3;
          this.tableStatus = false
          this.imgStatus=true
        }else if(this.active==3){

        }
      },
      updateSku(value){
        this.dialogVisible = true;
        this.dialogTitle = "编辑";
        this.skuListForm.price=value.price;
        this.skuListForm.sum=value.sum;
        this.skuListForm.skuImg=value.skuImg;
        this.skuListForm.skuId=value.skuId;
      },
      addSku (value) {
        this.dialogVisible = true;
          this.dialogTitle="添加";
          this.skuListForm.price='';
          this.skuListForm.sum='';
          this.skuListForm.skuImg='';
          this.skuListForm.skuId='';

      },
      resetForm () {
        this.$refs["spuForm"].resetFields()
      },
      getServiceEnsuresList () {
        this.$axios({
          method: "get",
          url: "http://localhost:8101/serviceEnsure/findAll",
        }).then(result => {
          for (let i = 0; i < result.data.length; i++) {
            console.log(result.data[i])
            this.serviceData.push({
              key: result.data[i].serviceEnsureId,
              label: `` + result.data[i].serviceEnsureName,
            })
          }
        })
      },
      getProductCateList () {
        this.$axios({
          method: "get",
          url: "http://localhost:8101/kinds/findAllKinds",
        }).then(result => {
          this.productCateOptions = result.data
        })
      },
      /*商品品牌*/
      getBrandList () {
        this.$axios({
          method: "get",
          url: "http://localhost:8101/spuBrand/findAllBrand",
        }).then(result => {
          this.brandOptions = result.data
        })
      },
      selectKindsChange () {
        /*根据选择的商品分类去查找商品属性*/
        this.$axios({
          method: "get",
          url: "http://localhost:8101/spuAttr/findAllById/" + this.formData.spuTypeId,
        }).then(result => {
          this.attrObject = result.data
         for (let i = 0; i < result.data.length; i++) {
            this.$set(this.formData.spuAttrValueList, i, [])
          }
        })
      },
      process (value) {
        this.skuName='';
        let data = this.formData.spuAttrValueList;
        for (let i = 0; i < data.length; i++) {
          if(data[i].attrId!=undefined){
            this.$axios({
              method: "get",
              url: "http://localhost:8101/spuAttr/findSpuAttrById/" +data[i].attrId,
            }).then(result => {
              this.skuName+=result.data.attrName+":"+data[i].attrValue+",";

            })
          }
        }
      },

    }
  }

</script>
<style>
</style>
